<!DOCTYPE html>
<html class="x-admin-sm" lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>接口管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/assets/admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/assets/admin/css/xadmin.css}">
    <script th:src="@{/assets/admin/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/assets/admin/js/xadmin.js}"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="分类名" name="cate_name"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn layui-btn-warm" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>查询
                            </button>
                        </div>
                    </form>
                    <hr>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()">
                        <i class="layui-icon"></i>批量删除
                    </button>
                    <button class="layui-btn" onclick="openLayer('新增维护接口','/system/security/addApiUI',400,280)" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i>新增
                    </button>
                    <button class="layui-btn layui-btn-normal" onclick="refreshApi()" lay-submit="" ><i class="layui-icon">&#xe669;</i>刷新本地权限
                    </button>
                </div>
                <div class="layui-card-body ">
                    <table id="api_table" lay-filter = 'api-table'>
                    </table>
                </div>
                <div class="layui-card-body ">
                    <div class="page" id="page"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="switchStatus">
    <!--这里的checked的状态只是演示-->
    <input type = "checkbox" name = "status" value = "{{ d.id }}" data-type="" lay-skin = "switch"lay-text = "正常|停用" lay-filter = "switchTest" {{ d.definition=='anon' ? 'checked':'' }}>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:src="@{/assets/admin/js/jquery.min.js}"></script>
<script th:replace="systemCommon/HarinCommon :: commonJs"></script>
<script type="text/javascript">
    $(function(){
        layui.use(['layer','table'],
            function () {
            console.log("layui开始");
            layer = layui.layer;
            table = layui.table;

            apiTable = table.render({
                elem: '#api_table',
                url: '/system/security/getApiList', //数据接口
                method: "get",
                where: {     //请求参数

                },
                parseData: function (res) { //res 即为原始返回的数据
                    var data = res.result;
                    return {
                        "code": res.code, //解析接口状态
                        // "msg": res.message, //解析提示文本
                        "count": data.total, //解析数据长度
                        "data": data.records //解析数据列表
                    };
                },
                response: {//重新定义规则
                    //statusName: 'status', //规定数据状态的字段名称，默认：code
                    statusCode: 200, //规定成功的状态码，默认：0
                    //msgName: 'hint', //规定状态信息的字段名称，默认：msg
                    //countName: 'total', //规定数据总数的字段名称，默认：count
                    //dataName: 'rows' //规定数据列表的字段名称，默认：data
                },
                page: true, //开启分页
                limits: [10, 20, 50],//可选条目数
                toolbar: false,//若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数
                loading: true, //加载动画
                cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left',width:80,unresize: true},
                        {field: 'id', title: 'ID', sort: true, fixed: 'left', width: 80, unresize: true},
                        {field: 'name', title: '接口名', fixed: 'left',width:200},
                        {field: 'url', title: '请求url', width: 300,  sort: true,unresize: true},
                        {field: 'status', title: '状态',templet: '#switchStatus', width: 95,unresize: true},
                        {field: 'operation', title:'操作', toolbar: '#barDemo',fixed: 'right',unresize: true}
                    ]
                ]
            });

            table.on('tool(api-table)', function (obj) {
                let event = obj.event;
                let data = obj.data;
                if(event == 'edit'){
                    openLayer('编辑接口信息','/system/security/addApiUI?id='+data.id,400,280);
                }else if(event == 'del'){
                    deleteApi(data.id);
                }
            });
        });
        console.log("layui结束");
    });

    /*api-删除*/
    function deleteApi(id) {
        layer.confirm('确认要删除吗？',
            function(index) {  //点击"确认"事件
                //console.log("确认事件");
                //发异步删除数据
                $.ajax({
                    url: "/system/security/deleteApi",
                    type: "post",
                    dataType: "JSON",
                    data: {id: id},
                    success: function (data) {
                        if (data.code == 200) {
                            layer.msg('已删除!', {icon: 1, time: 1000});
                            refreshData();
                        } else {
                            layer.msg('删除失败!请重试。', {icon: 2, time: 1000});
                        }
                    }

                });
                layer.close(index);
        },function(index){      //点击"取消"事件
            //console.log("取消了");
        }
        );
    }

    /**
     *调用打开弹窗的方法
     * title：弹窗标题
     * url:访问的url
     * w:弹窗宽
     * h:弹窗高
     * full:boolean 是否全屏显示
     */
    function openLayer(title,url,w,h,full) {
        //调用自己封装的方法。
        Harin.openLoyer1(title,url,w,h,full,refreshData);
    }
    function refreshData(){
        apiTable.reload({
            where :{

            }
        })
        //console.log("监听到了弹窗关闭了！");
    }


    function refreshApi(){
        $.ajax({
            url: "/system/security/refreshSystemApi",
            dataType:"JSON",
            type:"POST",
            success:function(data){
                if (data.code == 200) {
                    layer.alert(data.message, {icon: 6}, function (index) {
                        // 获得frame索引
                        layer.close(index);
                    });
                } else {
                    layer.alert(data.message, {icon: 5}, function (index) {
                        // 获得frame索引
                        //关闭当前frame
                        layer.close(index);
                    });
                }
            }
        });
    }
</script>
</body>
</html>
